<template>
	<view>
		<headerVue transparent="1" title="扑克牌" />
		<view class="eloquence-container">
			<!-- 倒计时区域 -->
			<view class="countdown-container">
			  <text class="countdown-text" :class="{ 'countdown-end': countdown === 0 }">
			    倒计时：{{ formatTime(countdown) }}
			  </text>
			</view>
			
			
		  <!-- 沟通扑克牌题目卡片 -->
		  <view class="card-container">
				<view class="card-tag">{{ currentCard.category }}</view>
		    <view class="card-content">
		      <!-- 题目文本 -->
		      <text class="card-text">{{ currentCard.content }}</text>
		      <!-- 题目分类标签 -->
		    </view>
		  </view>
		  
		  
		  <!-- 操作按钮 -->
		  <view class="btn-container">
		    <button 
		      class="change-btn" 
		      :disabled="isCounting && countdown > 0"
		      @click="handleChangeCard"
		    >
		      换一张
		    </button>
		  </view>
		</view>
	</view>
</template>

<script>
	import headerVue from '../../components/header.vue';
export default {
	components:{
		headerVue
	},
  data() {
    return {
      // 沟通扑克牌题库（涵盖不同沟通场景，可扩展）
      communicationCards: [
        { id: 1, category: "自我表达", content: "用3句话介绍自己的一个特长" },
        { id: 2, category: "观点阐述", content: "你认为“倾听”比“表达”更重要吗？为什么？" },
        { id: 3, category: "故事讲述", content: "简单描述一次你克服困难的经历" },
        { id: 4, category: "即兴回应", content: "如果朋友向你抱怨工作压力大，你会怎么安慰？" },
        { id: 5, category: "观点反驳", content: "有人说“沉默是金”，你如何反驳这个观点？" },
        { id: 6, category: "场景模拟", content: "向陌生人推荐一本你喜欢的书" },
        { id: 7, category: "价值传递", content: "为什么“真诚”在沟通中很重要？" },
        { id: 8, category: "问题解决", content: "如果和同事有沟通误会，你会怎么处理？" },
        { id: 9, category: "创意表达", content: "用比喻的方式描述“沟通”的作用" },
        { id: 10, category: "经验分享", content: "分享一次你成功说服别人的经历" },
        { id: 11, category: "观点支持", content: "支持“沟通需要换位思考”的理由有哪些？" },
        { id: 12, category: "场景应对", content: "如果演讲时忘词了，你会怎么做？" },
        { id: 13, category: "自我反思", content: "你觉得自己沟通中最大的不足是什么？" },
        { id: 14, category: "信息传递", content: "用简单的话解释一个复杂的概念（如“区块链”）" },
        { id: 15, category: "情感表达", content: "如何向家人表达你的感谢？" }
      ],
      currentCard: {}, // 当前显示的题目卡片
      countdown: 20, // 倒计时时长（20秒）
      timer: null, // 定时器实例
      isCounting: false // 是否正在倒计时
    };
  },
  onLoad() {
    // 页面加载时默认抽取第一张卡片
    this.getRandomCard();
  },
  onUnload() {
    // 页面卸载时清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
		goBack () {
			uni.navigateBack({
				delta: 1 // 返回的页面数
			});
		},
    /**
     * 随机抽取一张沟通卡片
     */
    getRandomCard() {
      // 生成随机索引（0 ~ 题库长度-1）
      const randomIndex = Math.floor(Math.random() * this.communicationCards.length);
      // 获取随机卡片
      this.currentCard = this.communicationCards[randomIndex];
    },
    
    /**
     * 格式化倒计时时间（补零处理，如 05 秒）
     */
    formatTime(seconds) {
      return seconds.toString().padStart(2, "0");
    },
    
    /**
     * 处理“换一张”按钮点击事件
     */
    handleChangeCard() {
      // 1. 重置倒计时为20秒
      this.countdown = 20;
      
      // 2. 清除现有定时器（防止多个定时器同时运行）
      if (this.timer) {
        clearInterval(this.timer);
      }
      
      // 3. 随机抽取新卡片
      this.getRandomCard();
      
      // 4. 启动新的倒计时
      this.startCountdown();
    },
    
    /**
     * 启动倒计时
     */
    startCountdown() {
      this.isCounting = true;
      // 每秒减少1秒倒计时
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          // 倒计时结束，清除定时器
          clearInterval(this.timer);
          this.isCounting = false;
          // 可添加倒计时结束提示（如弹窗、震动等）
          uni.showToast({
            title: "时间到！",
            icon: "none",
            duration: 1000
          });
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
/* 整体容器样式 */
.eloquence-container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题样式 */
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
}

/* 卡片容器样式 */
.card-container {
	position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 50rpx;
}

/* 卡片内容样式 */
.card-content {
  position: relative;
}

/* 卡片题目文本 */
.card-text {
  font-size: 32rpx;
  color: #333;
  line-height: 56rpx;
	text-align: center;
  display: block;
  margin-bottom: 20rpx;
}

/* 卡片分类标签 */
.card-tag {
  position: absolute;
  top: -110rpx;
  right: 24rpx;
  background-color: #39c5bb;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
}

/* 倒计时容器样式 */
.countdown-container {
	width: 100%;
	text-align: left;
  margin-bottom: 60rpx;
}

/* 倒计时文本样式 */
.countdown-text {
	color: orangered;
  font-size: 32rpx;
  font-weight: bold;
}

/* 倒计时结束样式（可选） */
.countdown-end {
  color: #999;
  animation: blink 1s infinite alternate;
}

/* 闪烁动画（倒计时结束时） */
@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0.6; }
}

/* 按钮容器样式 */
.btn-container {
  width: 100%;
}

/* 换题按钮样式 */
.change-btn {
  width: 40%;
  background-color: #39c5bb;
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
}

/* 按钮禁用样式 */
.change-btn[disabled] {
  background-color: #c6e2ff;
  color: #fff;
}
</style>